let FreeDirectionTootip = function(opts) {
  return new FreeDirectionTootip.prototype.init(opts);
};
// FreeDirectionTootip
FreeDirectionTootip.prototype = {
  defaultOptions: {
    width: 140,
    height: 42,
    borderRadius: 6,
    arrowWidth: 14,
    margin: 6,
    backgroundColor: "rgba(127,171,255,1)",
    opacity: 0.1,
    offsetY:0,
    containerId: ""
  },
  init: function(options) {
    const opts = this.defaultOptions;
    for (let key in options) {
      opts[key] = options[key];
    }
    const elTip = document.createElement("div");
    const elCanvas = document.createElement("canvas");
    elTip.id = opts.id;
    elTip.style.display = "none";
    elTip.innerHTML = `<div id="${opts.id}text" style="position:absolute;z-index:10;padding:${opts.margin}px;box-sizing: border-box;width: 100%;height: 100%;"></div>`;
    elCanvas.id = opts.id + "canvas";
    elCanvas.width = opts.width + opts.margin * 2;
    elCanvas.height = opts.height + opts.margin * 2;
    elCanvas.style.opacity = opts.opacity;
    elTip.appendChild(elCanvas);
    this.elContainer = document.getElementById(opts.containerId);
    this.elContainer.appendChild(elTip);
    this.elTip = elTip;
    this.elCanvas = elCanvas;
    this.elText = document.getElementById(opts.id + "text");
    this.id = opts.id;
    this.html = opts.html;
    this.width = opts.width;
    this.height = opts.height;
    this.borderRadius = opts.borderRadius;
    this.arrowWidth = opts.arrowWidth;
    this.margin = opts.margin;
    this.backgroundColor = opts.backgroundColor;
    this.offsetY = opts.offsetY;
    return this;
  },
  show: function(left, top, html) {
    const tipTop = top + 2;
    const mousePostion = [
      { value: left - this.elContainer.offsetLeft, side: "left" },
      {
        value:
          this.elContainer.clientWidth - left - this.elContainer.offsetLeft,
        side: "right"
      },
      { value: tipTop - this.elContainer.offsetTop, side: "top" },
      {
        value:
          this.elContainer.clientHeight - tipTop - this.elContainer.offsetTop,
        side: "bottom"
      }
    ];
    const stylePosition = this.getElementPosition(
      this.elContainer,
      mousePostion,
      this.width,
      this.height,
      this.margin,
      this.offsetY
    );
    this.elText.innerHTML = html;
  },
  hide: function() {
    this.elTip.setAttribute("style", "display:none;");
  },
  getElementPosition: function(
    elContainer,
    mousePostion,
    width,
    height,
    margin,
    offsetY
  ) {
    const marginX = width / 2 + margin;
    const marginY = height + margin * 2;
    const minLeft = marginX;
    const maxLeft = elContainer.offsetWidth - marginX;
    const minTop = marginY;
    const pageX = mousePostion[0].value;
    const pageY = mousePostion[2].value;
    let styleX = "";
    let styleY = "";
    let offsetwidth = 0;
    if (pageX >= minLeft && pageX <= maxLeft) {
      styleX = "left:" + (pageX - marginX) + "px;";
    }
    if (pageX < minLeft) {
      styleX = "left:0;";
    }
    if (pageX > maxLeft) {
      styleX = "right:0;";
    }
    if (pageY >= minTop) {
      offsetwidth = -offsetY;
      styleY = "top:" + (pageY - marginY + offsetwidth) + "px;";
    }
    if (pageY < minTop) {
      offsetwidth = offsetY;
      styleY = "top:" + (pageY + offsetwidth) + "px;";
    }
    this.elTip.setAttribute("style", "position: absolute;" + styleX + styleY);
    this.drawTipBox(
      this.elCanvas,
      this.width,
      this.height,
      this.margin,
      this.arrowWidth,
      mousePostion[0].value - this.elTip.offsetLeft,
      mousePostion[2].value - this.elTip.offsetTop,
      offsetwidth
    );
    return styleX + styleY;
  },
  drawTipBox: function(
    el,
    width,
    height,
    margin,
    arrowWidth,
    pageX,
    pageY,
    offsetY
  ) {
    const centerX = width / 2 + margin;
    const centerY = height / 2 + margin;
    const deg = this.getTanDeg(
      { x: centerX, y: centerY },
      { x: pageX, y: pageY }
    );
    const arrowRadius = Math.min(width / 2, height / 2, arrowWidth);
    const ctx = el.getContext("2d");
    ctx.clearRect(0, 0, width + margin * 2, height + margin * 2);
    ctx.fillStyle = this.backgroundColor;
    ctx.strokeStyle = this.backgroundColor;
    ctx.lineWidth = this.borderRadius;
    ctx.lineJoin = "round";
    ctx.beginPath();
    ctx.moveTo(margin + this.borderRadius / 2, margin + this.borderRadius / 2);
    ctx.lineTo(
      width + margin - this.borderRadius,
      margin + this.borderRadius / 2
    );
    ctx.lineTo(
      width + margin - this.borderRadius,
      height + margin - this.borderRadius
    );
    ctx.lineTo(
      margin + this.borderRadius / 2,
      height + margin - this.borderRadius
    );
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(
      centerX - arrowRadius * Math.sin(deg),
      centerY + arrowRadius * Math.cos(deg)
    );
    ctx.lineTo(pageX, pageY + offsetY);
    ctx.lineTo(
      centerX + arrowRadius * Math.sin(deg),
      centerY - arrowRadius * Math.cos(deg)
    );
    ctx.moveTo(centerX, centerY);
    ctx.closePath();
    ctx.fill();
  },
  getTanDeg: function(a, b) {
    return Math.atan((b.y - a.y) / (b.x - a.x));
  }
};
FreeDirectionTootip.prototype.init.prototype = FreeDirectionTootip.prototype;
export default FreeDirectionTootip;
